<template>
	<view class="h100v bf flex flex-direction-column" style="width: 100%;">
		<uni-nav-bar id="uninavbar" :uropcity="1" :isleft="false" :fixed="true" :ispr="true" :border="false"
			:statusBar="true" size="38" :title="`商品管理`"></uni-nav-bar>
		<view class="f-1 flex flex-direction-column" style="min-height: 0rpx;">
			<view class="top1s bf6 f-s-c c9"
				@click="go({t:1,url:'/yb_shd/my/storeset/components/goods-search?sjqx=' + sjqx })">
				<text class="iconfont iconss f28"></text>
				<view class="top1si f24">搜索商品名称</view>
			</view>
			<view class="gi1c p3">
				<view class="bf3b p3 bs20 f-row">
					<view v-if="!v.hide" @click="gllx(i)" v-for="(v, i) in tarr" :key="i" class="f-1 f-c-c">
						<view class="img1 mt10">
							<mg-img :src="`/static/img/${v.img}.png`"></mg-img>
						</view>
						<view class="mt10 f26" :style="{color:i==tarrIdx?tColor:''}">{{ v.name }}</view>
					</view>
				</view>
			</view>
			<view class="h100 bf f-col f-1" style="min-height: 0rpx;">
				<view class="f-y-c">
					<nav-tab class="f-1" :isscroll="true" xhxjb="linear-gradient(to right, #fe9367, #FE9367)" uw="40"
						uh="10" height="70" itw="23%" v-model="idxHorizontal" @changeTab="changeTab" :tabs="tabs"
						ifsize="28" :isname="{ fontWeight: 'bold', fontSize: '32rpx' }"></nav-tab>
				</view>
				<view class="f-1" style="min-height: 0rpx;">
					<view v-if="idxHorizontal == 0" class="category-c flex flex-align-start"
						style="padding-bottom: 0rpx;">
						<scroll-view scroll-y class="left-c h100" scroll-with-animation="true" :scroll-into-view="lsiv"
							@scrolltolower="lower">
							<view class="title-c" :id="'l' + i" :class="{ onSelected: idxVertical == i }"
								v-for="(v, i) in cList" :key="i" @click="choose(i)">
								<view v-if="idxVertical == i" class="title-b" :style="{ background: tColor }"></view>
								<view v-if="v.isRequire == 1 || (v.isRequire == 2 && v.customName)"
									class="title-bx cf5f f18 nowei">
									{{ v.isRequire == 1 ? '必选' : v.customName }}
								</view>
								<view class="title-n f-c-xc"
									:class="{ ysyj: i == idxVertical + 1, yxyj: i == idxVertical - 1 }">
									<!-- <block v-if="sjxx.categorySet.display==3">
										<view class="f-y-e">
											<view class="title-img">
												<mg-img m='aspectFit' :src="v.icon" />
											</view>
											<text>{{lfName(v.name)}}</text>
										</view>
										<text class="mt15 t-o-e" v-if="lsName(v.name)">{{lsName(v.name)}}</text>
									</block>
									<block v-else-if="sjxx.categorySet.display==2">
										<view class="f-x-c">
											<view class="title-img">
												<mg-img m='aspectFit' :src="v.icon" />
											</view>
										</view>
										<text class="mt15 t-c t-o-e">{{v.name}}</text>
									</block> -->
									<!-- <block v-else> -->
									<view class="f-x-c">
										<text class="t-o-e2">{{ v.name }}</text>
									</view>
									<!-- </block> -->
								</view>
							</view>
							<view class="title-c">
								<view class="title-n"></view>
							</view>
							<view class="title-c">
								<view class="title-n"></view>
							</view>
							<view class="title-c">
								<view class="title-n"></view>
							</view>
						</scroll-view>
						<view class="f-g-1 bf p-r h100">
							<scroll-view scroll-y="true" class="wh" :scroll-into-view="rsiv" @scrolltolower="lower">
								<view :id="`r${si}`" v-for="(co, si) in dataList" :key="si" class="conw2 f-row p2">
									<view class="f-g-0 left bs10 p-r">
										<mg-img cname="wh" :src="co.icon" />
										<view v-if="co.stock <= 0" class="p-a ysq f-c b0 cf w100 f22">已售罄</view>
										<view v-if="co.isRecommend == 1" class="p-a sptj f20">推荐</view>
									</view>
									<view class="f-g-1 ml20 f24 c6">
										<view @click="bjsp(co,si)" class="f-y-c">
											<view class="f-1 f30 t-o-e c0">{{ co.name }}</view>
											<text class="iconfont iconright1 f26 c6"></text>
										</view>
										<view class="mt10 f-raw">
											<text class="mr30">销量{{ co.salesNum }}</text>
											<text v-if="co.isSpecs == 1">多规格</text>
											<text v-else class="mr30">库存{{ co.stock }}</text>
										</view>
										<view @click="jgkc({ co, t: 1 ,si})" class="crb f32 f-y-c">
											<text>{{ sl + co.price }}</text>
											<text v-if="co.isSpecs != 1" class="iconfont iconbj ml10"></text>
										</view>
										<view class="f-x-e mt10 c0">
											<view @click="jgkc({ co, t: 2,si })" v-if="co.isSpecs != 1"
												class="czbtn b-d">
												库存</view>
											<view @click="spcz({ co, t: 'sj',si })" class="czbtn b-d">
												{{ co.display == 1 ? '下' : '上' }}架
											</view>
											<view @click="morecz(co,si)" class="czbtn b-d">更多</view>
										</view>
									</view>
								</view>
								<jzz bgcolor="transparent" w="300" h="300" otext="暂无相关商品"
									:nodata="dataList.length == 0 && isget" :mygd="mygd" />
							</scroll-view>
						</view>
					</view>
					<view v-if="idxHorizontal != 0" class="wh">
						<scroll-view scroll-y="true" class="wh" :scroll-into-view="rsiv" @scrolltolower="lower">
							<view v-if="idxHorizontal == 3" class="p2">
								<view class="bf3b p3 bs20 c6 f26">
									<view class="f-y-c mb10">
										<text class="iconfont iconwen f28 mr15 c6"></text>
										<text>已下架商品说明</text>
									</view>
									<view class="f22">已下架代表该商品暂时停止售卖,顾客点餐时会看不到该商品。</view>
								</view>
							</view>
							<block v-if="idxHorizontal != 0">
								<view :id="`r${si}`" v-for="(co, si) in dataList" :key="si" class="conw2 f-row p2">
									<view class="f-g-0 left bs10 p-r">
										<mg-img cname="wh" :src="co.icon" />
										<view v-if="co.stock <= 0" class="p-a ysq f-c b0 cf w100 f22">已售罄</view>
										<view v-if="co.isRecommend == 1" class="p-a sptj f20">推荐</view>
										<view v-if="co.display == 2" class="p-a yxj f-c udlr c0 w100 f22">已下架</view>
									</view>
									<view class="f-g-1 ml20 f24 c6">
										<view @click="bjsp(co)" class="f-y-c">
											<view class="f-1 f30 t-o-e c0">{{ co.name }}</view>
											<text class="iconfont iconright1 f26 c6"></text>
										</view>
										<view class="mt10 f-raw">
											<text class="mr30">销量{{ co.salesNum }}</text>
											<text v-if="co.isSpecs == 1">多规格</text>
											<text v-else class="mr30">库存{{ co.stock }}</text>
										</view>
										<view @click="idxHorizontal != 5 && jgkc({ co, t: 1 })" class="crb f32 f-y-c">
											<text>{{ sl + co.price }}</text>
											<text v-if="co.isSpecs != 1 && idxHorizontal != 5"
												class="iconfont iconbj ml10"></text>
										</view>
										<view class="f-x-e c0">
											<block v-if="idxHorizontal != 5">
												<view @click="jgkc({ co, t: 2 })"
													v-if="co.display != 2 && co.isSpecs != 1" class="czbtn b-d">库存
												</view>
												<block v-if="co.isSpecs != 1">
													<view @click="spcz({ co, t: 'gq' })" class="czbtn b-d">估清</view>
													<view @click="spcz({ co, t: 'zm' })" class="czbtn b-d">置满</view>
												</block>
												<view v-if="idxHorizontal != 5" @click="spcz({ co, t: 'sj' })"
													class="czbtn b-l-mt">{{ co.display == 1 ? '下' : '上' }}架</view>
											</block>
											<view @click="spcz({ co, t: 'hf' })"
												v-if="idxHorizontal == 5 && (co.isMain==1||co.goodsModel==3)"
												class="czbtn b-d">恢复
											</view>
										</view>
									</view>
								</view>
								<jzz bgcolor="transparent" w="300" h="300" otext="暂无相关商品"
									:nodata="dataList.length == 0 && isget" :mygd="mygd" />
							</block>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部的新建商品 -->
		<!-- <view class="navbar2 bt f-row" v-if="idxHorizontal == 0&&(sjqx==1||sjqx==4)">
			<view v-if="sjqx==1" class="f-c" @click="glfl" style="width: 168rpx;background: #FBFBFB;">管理分类</view>
			<view class="f-1 f-row bf">
				<template v-for="(v, i) in navs">
					<view class="f-1 f-y-c" @click="djTab(v)" :key="i">
						<view class="wh f-c">
							<text class="cf7c mr10" :style="{ color: tColor }"
								:class="['icon' + v.i, 'iconfont f38']"></text>
							<view class="">{{ v.t }}</view>
						</view>
					</view>
				</template>
			</view>
		</view> -->
		<mg-load v-if="showloading" type="2"></mg-load>
		<mg-modal :ismr="true" v-model="showJgkc" width="650rpx" :z-index="3000">
			<view class="bs10 bf p-r">
				<text @click="showJgkc = false" class="ggx p-a iconfont iconcuo f50 c9"></text>
				<view class="p20 ggh f-c f32">
					<view class="t-o-e t-c" style="width: 80%;">编辑</view>
				</view>
				<view class="ggb">
					<mg-input v-if="jgkctype == 1" cname="p23" t="number" v-model="jgparams.price" isr="1" ht="价格"
						htc="f30" pr="请输入" icn="f30" />
					<mg-input v-if="jgkctype == 2" cname="p23" t="number" v-model="jgparams.stock" isr="1" ht="库存"
						htc="f30" pr="请输入" icn="f30" />
				</view>
				<button class="foot-btn3 b-l-mt w33" @click="save" :disabled="loading" :loading="loading"
					style="margin: 30rpx auto;" hover-class="btnhc">确定</button>
			</view>
		</mg-modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import utils from '@/common/utils.js';
	import uniNavBar from '@/components/third/uni-nav-bar.vue';
	import navTab from '@/components/common/functionCmp/nav-tab.vue';
	import jzz from '@/components/common/jzz.vue';
	import mgModal from '@/components/common/modal.vue';
	import mgInput from '@/components/form/mg-input.vue';
	export default {
		name: 'order-index',
		components: {
			uniNavBar,
			navTab,
			jzz,
			mgModal,
			mgInput
		},
		data() {
			return {
				hotUpdata: false,
				rIndex: 0,
				idxHorizontal: 0,
				idxVertical: 0,
				showloading: false,
				tarrIdx: 0,
				tabs: [{
						name: '已上架',
						num: '0'
					},
					{
						name: '库存不足',
						num: '0'
					},
					{
						name: '已售罄',
						num: '0'
					},
					{
						name: '已下架',
						num: '0'
					},
					{
						name: '待上架',
						num: '0'
					},
					{
						name: '回收站',
						num: '0'
					}
				],
				navs: [{
					// 	i: 'pl',
					// 	k: 'plcz',
					// 	t: '批量操作'
					// },
					// {
					// 	i: 'pl',
					// 	k: 'cksp',
					// 	url: 'spgl?t=1',
					// 	t: '管理排序'
					// },
					// {
					i: 'spa',
					k: 'xjsp',
					url: 'fbsp',
					t: '新建商品'
				}],
				cList: [],
				lsiv: '',
				rsiv: '',
				dataList: [],
				isget: false,
				mygd: false,
				params: {
					categoryId: '',
					type: 1,
					page: 1,
					size: 10,
					goodsType: 1,
				},
				showJgkc: false,
				jgkctype: '',
				jgparams: {
					price: '',
					stock: ''
				},
				sjqx: 0,
				loading: false
			};
		},
		onLoad(options) {
			this.changeTab();
		},
		onShow() {
			// 修改商品返回页面后  刷新数据

			if (this.dataList.length != 0 && this.idxHorizontal === 0) {
				const tempPage = Math.floor(this.rIndex / this.params.size) + 1
				this.getList(true, tempPage)
				// 	this.dataList = []
				// 	this.choose(this.idxVertical)
			}

		},
		computed: {
			...mapState(['sjxx']),
			tarr() {
				return [{
						name: '外卖商品',
						img: '3'
					},
					{
						name: '店内商品',
						img: '2'
					},
					{
						name: '商品扩展',
						img: '6',
						hide: this.sjxx.goodsModel != 3 && this.sjqx != 1
					},
					{
						name: '新建商品',
						img: '4'
					}
				]
			},
		},
		watch: {
			idxVertical(val) {
				this.idxVertical = val
			}
		},
		methods: {
			// 上面一栏的跳转
			gllx(i) {
				if (i < 2) {
					this.tarrIdx = i
					this.changeTab();
				} else if (i == 2) {
					this.go({
						url: '../spgl/index?type=' + (this.tarrIdx == 1 ? 2 : 1)
					})
				} else if (i == 3) {
					this.go({
						url: '../spgl/fbsp?type' + (this.tarrIdx == 1 ? 2 : 1)
					})
				}
				// console.log(i)
			},
			changeTab: utils.throttle(async function(e) {
				this.showloading = true;
				this.isget = this.mygd = false;

				if (this.hotUpdata) {
					const tempPage = Math.floor(this.rIndex / this.params.size) + 1
					await this.getList(true, tempPage)
					this.hotUpdata = false
					return
				}

				this.params.page = 1;
				this.params.type = this.idxHorizontal + 1;
				this.params.goodsType = this.tarrIdx == 1 ? 2 : 1
				this.dataList = [];
				if (this.idxHorizontal == 0) {
					await this.getFL();
					this.getDishsByType(this.idxVertical, e[0]);
				} else {
					this.params.categoryId = '';
					this.getList();
				}
			}, 300),
			async getFL() {
				this.lsiv = this.rsiv = '';
				let {
					data
				} = await this.util.request({
					url: this.api.spfl,
					data: {
						type: this.tarrIdx == 1 ? 2 : 1
					}
				});
				this.cList = data;
				setTimeout(() => {
					this.lsiv = 'l0';
					this.rsiv = 'r0';
				}, 500);

			},
			choose: utils.throttle(async function(e) {
				this.showloading = true;
				this.lsiv = this.rsiv = '';
				// if (this.idxVertical == index) {
				// 	return;
				// }
				this.idxVertical = e[0];
				this.isget = this.mygd = false;
				this.params.page = 1;
				this.dataList = [];
				await this.getDishsByType(e[0]);
				this.lsiv = 'l0';
				this.rsiv = 'r0';
			}, 300),
			async getDishsByType(i) {
				if (this.cList[i]) {
					this.params.categoryId = this.cList[i].id;
				} else {
					this.params.categoryId = null
				}
				await this.getList();
			},
			lower: utils.throttle(function(e) {
				if (!this.mygd && this.isget) {
					this.isget = false;
					this.getList();
				}
			}, 300),
			async getList(hotUpdata, tempPage) {
				var params = utils.deepCopy(this.params)
				if (tempPage) {
					params.page = tempPage
				}
				let {
					data
				} = await this.util.request({
					url: this.api.splb,
					data: params
				})
				if (hotUpdata) {
					this.dataList.splice((tempPage - 1) * this.params.size, this.params.size, ...data.data)
					this.lsiv = `l${this.idxVertical < 3 ? 0 : this.idxVertical - 3}`;
					this.rsiv = 'r' + this.rIndex;
					this.sjqx = data.isMain == 1 ? 1 : +data.goodsModel + 1
					this.isget = true;
					this.mygd = this.params.size > data.data.length;
					setTimeout(() => {
						this.showloading = false;
					}, 300);
					return
				}
				this.dataList = this.dataList.concat(data.data);
				this.tabs[0].num = data.allTotal;
				this.tabs[1].num = data.noStock;
				this.tabs[2].num = data.sellOutTotal;
				this.tabs[3].num = data.errDisplay;
				this.tabs[4].num = data.noDisplay;
				this.tabs[5].num = data.recycleTotal;
				this.sjqx = data.isMain == 1 ? 1 : +data.goodsModel + 1
				this.isget = true;
				this.mygd = this.params.size > data.data.length;
				this.params.page++;
				setTimeout(() => {
					this.showloading = false;
				}, 300);
			},
			async spcz(e) {
				this.goodsInfo = e.co;
				this.rIndex = e.si || 0
				let obj = {};
				switch (e.t) {
					case 'sj':
						obj = {
							title: `您确认${e.co.display == 1 ? '下架' : '上架'}商品-${e.co.name}吗？`,
							url: 'spcz',
							params: {
								id: e.co.id,
								type: e.co.display == 1 ? 2 : 1
							}
						};
						break;
					case 'gq':
						if (this.sjqx == 2) return this.util.message('暂无权限', 3)
						obj = {
							title: `您确认估清商品-${e.co.name}吗？`,
							url: 'spcz',
							params: {
								id: e.co.id,
								type: 3
							}
						};
						break;
					case 'zm':
						if (this.sjqx == 2) return this.util.message('暂无权限', 3)
						obj = {
							title: `您确认置满商品-${e.co.name}吗？`,
							url: 'spcz',
							params: {
								id: e.co.id,
								type: 4
							}
						};
						break;
					case 'hf':
						obj = {
							title: `您确认恢复商品-${e.co.name}吗？`,
							url: 'spcz',
							params: {
								id: e.co.id,
								type: 8
							}
						};
						break;
				}
				// console.log(e, obj)
				try {
					await this.util.modal(obj.title);
				} catch (e) {
					return;
				}
				this.showloading = true;
				try {
					let data = await this.util.request({
						url: this.api[obj.url],
						method: 'POST',
						data: obj.params
					});
					if (data) {
						this.util.message('操作成功', 1);
						utils.stfn(() => {
							this.hotUpdata = true
							this.changeTab(1);
						});
					}
				} catch (e) {}
				this.showloading = false;
			},
			morecz(co, si) {
				this.rIndex = si || 0
				if (this.sjqx == 2 || this.sjqx == 3) return this.util.message('暂无权限', 3)
				let arr = [];
				if (co.isSpecs != 1) {
					arr = arr.concat(['估清', '置满']);
				}
				arr.push(co.isRecommend == 1 ? '取消推荐' : '推荐商品');
				arr.push('商品删除');
				uni.showActionSheet({
					itemList: arr,
					success: async res => {
						let t = arr[res.tapIndex];
						try {
							await this.util.modal(`确认${t}吗？`);
							this.showloading = true;
							let t2 = '';
							if (t == '估清') {
								t2 = 3;
							} else if (t == '置满') {
								t2 = 4;
							} else if (t == '推荐商品') {
								t2 = 5;
							} else if (t == '取消推荐') {
								t2 = 6;
							} else if (t == '商品删除') {
								t2 = 7;
							}
							let res2 = await this.util.request({
								url: this.api.spcz,
								data: {
									id: co.id,
									type: t2
								}
							});
							this.showloading = false;
							if (res2) {
								this.util.message('操作成功', 1);
								utils.stfn(() => {
									if (this.idxHorizontal === 0) {
										this.hotUpdata = true
										this.changeTab(1);
										// this.choose(this.idxVertical)
									} else {
										this.changeTab();
									}
								});
							}
						} catch (e) {}
					}
				});
				// console.log(co)
			},
			jgkc(e) {
				if (this.sjqx == 2) return this.util.message('暂无权限', 3)
				this.rIndex = e.si || 0
				this.goodsInfo = e.co;
				if (e.co.isSpecs == 1) {} else {
					this.jgparams.price = e.co.price;
					this.jgparams.stock = e.co.stock;
					this.showJgkc = true;
					this.jgkctype = e.t;
				}
			},
			async save() {
				let arr = this.jgkctype == 1 ? ['stock'] : ['price'];
				let judgeData = utils.isFailParams({
					field: this.jgparams,
					filter: arr,
					tips: {
						price: '请输入价格',
						stock: '请输入库存'
					}
				});
				if (!judgeData) {
					return;
				} else {
					this.loading = true;
					this.showloading = true;
					// return
					let p = {
						id: this.goodsInfo.id
					};
					if (this.jgkctype == 1) {
						p.price = this.jgparams.price;
					} else if (this.jgkctype == 2) {
						p.stock = this.jgparams.stock;
					}
					try {
						let res = await this.util.request({
							url: this.api.spcz,
							method: 'POST',
							data: p
						});
						if (res) {
							this.util.message('保存成功', 1, 1000);
							this.showJgkc = false;
							utils.stfn(() => {
								this.hotUpdata = true
								this.changeTab(1);
							});
						}
					} catch (e) {}
					this.showloading = this.loading = false;
				}
			},
			glfl() {
				this.go({
					url: '../spgl/flsz?type=' + (this.tarrIdx == 1 ? 2 : 1)
				})
			},
			// 新增商品
			djTab(msg) {
				if (msg.url = 'fbsp') {
					this.go({
						url: '../spgl/fbsp?type=' + (this.tarrIdx == 1 ? 2 : 1)
					})
				}
			},
			bjsp(v, si) {
				if (this.sjqx != 1 && this.sjqx != 4) return this.util.message('暂无权限', 3)
				this.rIndex = si || 0
				this.go({
					url: '../spgl/fbsp?type=' + (this.tarrIdx == 1 ? 2 : 1) + '&id=' + v.id
				})
			},
		}
	};
</script>
<style>
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
	}
</style>
<style scoped lang="scss">
	@import './goods.scss';
</style>